home *** CD-ROM | disk | FTP | other *** search
/ Developer CD Series 1992 June: ROMin Holiday / ADC Developer CD (1992-06) (''ROMin Holiday'')_iso / Developer Connection - 06-1992.iso / Development Platforms / Apple II / Essentials / Human.Int.Notes / HIN.010 < prev   
Encoding:
Text File  |  1990-06-19  |  9.3 KB  |  195 lines  |  [TEXT/pdos]
  1. Human Interface Note #8    
  2. _____________________________________________________________________________
  3.  
  4. Note #10   Alert Box Guidelines
  5.  
  6.            Written by:    John Sullivan                             June 1990
  7.            (Slightly plagiarized from Kate Gomoll)
  8. _____________________________________________________________________________
  9.  
  10. Some simple rules to follow for alert boxes.
  11. _____________________________________________________________________________
  12.  
  13.  
  14. Why there are alert box guidelines
  15.  
  16. From the feedback the Human Interface group has received, it is clear 
  17. that the discussion of alert boxes in Human Interface Guidelines:  The 
  18. Apple Desktop Interface is both imperfect and incomplete.
  19.  
  20. These guidelines serve at least three major purposes.  First, they 
  21. provide a simple recipe for making attractive alert boxes.  Second, they 
  22. provide a simple recipe (the same one, in fact) for making alert boxes 
  23. that have a standard appearance and behavior.  This standardization is 
  24. important, because the more familiar the appearance of an alert box is 
  25. to users, the easier it is for them to concentrate on the specific 
  26. message being communicated.  Finally, these guidelines provide simple 
  27. rules that can be extended for designing more complicated dialog boxes.
  28.  
  29. This Note supplements and partially replaces the discussion in Human 
  30. Interface Guidelines:  The Apple Desktop Interface, so where this Note 
  31. and the book disagree, believe this Note.
  32.  
  33.  
  34. Alert box layout
  35.  
  36. Alert boxes drawn with the toolbox calls _StopAlert, _NoteAlert, and 
  37. _CautionAlert place the icon in the rectangle (top = 10, left  = 20, 
  38. bottom = 42, right = 52); however, placement of all other elements is 
  39. left to the individual designer.  Figure 1 shows a simple alert box in 
  40. which spacing between elements is based upon this placement of the icon.
  41.  
  42.     | B |      | B |                                        | A |
  43.   |-|<->|------|<->|----------------------------------------|---|-|
  44. --|-|===|======|===|========================================|===| |
  45. A | |   |      |   |                                        |   | |
  46. --|-|---|--/\--|---|This is where the text goes.  Be sure to|   | |
  47.   | |   | /  \ |   |use wording that makes sense to the     |   | |
  48.   | |   |/ !  \|   |typical user.                           |   | |
  49.   | |   |------|   -----------------------------------------|---|-|--
  50.   | |                                                       |   | | A
  51.   | |                          ___________     #############|---|-|--
  52.   | |                         /  Cancel   \  //    Xxxxxx   \\  | |                                                      
  53.   | |                         \___________/  \\_____________//--|-|--
  54.   | |                                     |   |#############    | | A
  55.   | |=====================================|===|=================|-|--
  56.   |---------------------------------------|<->|-------------------|
  57.     A = 13 white pixels                   | A |
  58.     B = 23 white pixels
  59.  
  60.               Figure 1-Simple alert box with spacing
  61.  
  62. Following are the exact coordinates used in Figure 1 and how they were 
  63. derived, in Rez format.  Note that there are three white pixels built 
  64. into the dialog frame and that the upper left corner of the text item is 
  65. not the same as the upper left corner of the first character.
  66.  
  67. The first set of definitions are not actual coordinates, but instead are 
  68. intermediate values used to derive them:
  69.  
  70. #define A                  13  // white space between most elements
  71. #define B                  23  // white space to left and right of icon
  72. #define NumTextLines        3  // number of lines of text in the alert
  73. #define LineHeight         16  // height of a single line of Chicago-12
  74. #define ButtonHeight       20  // standard button height
  75. #define LongestButtonName  41  // width of "Cancel" in Chicago-12
  76. #define ButtonWidth        59  // (LongestButtonName + 18)
  77.  
  78. The rest of the definitions are actual coordinates defining the window 
  79. size (AlertWidth and AlertHeight) and the icon, text, and button 
  80. locations:
  81.  
  82. #define AlertWidth        341  // chosen to make the right margin = A
  83.  
  84. #define IconLeft           20  // (B - 3)
  85. #define IconRight          52  // (IconLeft + 32)
  86. #define IconTop            10  // (A - 3)
  87. #define IconBottom         42  // (IconTop + 32)
  88.  
  89. #define TextLeft           74  // (IconRight + (B - 1))
  90. #define TextRight         331  // (AlertWidth - (A - 3))
  91. #define TextTop             7  // (A - 6)
  92. #define TextBottom         55  // (TextTop + (NumTextLines * LineHeight))
  93.  
  94. #define ButtonTop          68  // (TextBottom + A)
  95. #define ButtonBottom       88  // (ButtonTop + ButtonHeight)
  96. #define ActionButtonRight 331  // (AlertWidth - (A - 3))
  97. #define ActionButtonLeft  272  // (ActionButtonRight - ButtonWidth)
  98. #define CancelButtonRight   259  // (ActionButtonLeft - A)
  99. #define CancelButtonLeft    200  // (CancelButtonRight - ButtonWidth)
  100.  
  101. #define AlertHeight          98  // (ButtonBottom + (A - 3))
  102.  
  103.  
  104. The action button
  105.  
  106. Alert boxes that provide the user a choice should be worded as questions 
  107. to which there is an unambiguous, affirmative response.  The button for 
  108. this affirmative response is called the action button.  Whenever 
  109. possible, label the action button with the action that it performs.  
  110. Button names such as Save, Quit, or Erase Disk allow experienced users 
  111. to click the correct button without reading the text of a familiar 
  112. dialog.  These labels are often clearer than words like OK or Yes.  
  113. Phrase the question to match the action that the user is trying to 
  114. perform.  For instance, if the user selects Revert to Saved, the 
  115. confirmation alert should say something like "Revert to the last saved 
  116. version of the document?  Any changes made since the last save will be 
  117. lost."  This message is much clearer than something like "Discard 
  118. changes made since the last save?"
  119.  
  120. If the action cannot be condensed conveniently into a word or two, use 
  121. OK.  Also use OK when the alert is simply giving the user information 
  122. without providing any choices.
  123.  
  124.  
  125. The cancel button
  126.  
  127. Whenever possible, provide a button that allows the user to back out of 
  128. the operation that caused the alert box to be displayed.  This button is 
  129. activated when the user types Command-. (period) or presses the Escape 
  130. key.  (Note that the Command key sequence may differ depending upon the 
  131. script system in use.  See Macintosh Technical Note #263, International 
  132. Canceling, for more information.)  Apple recommends naming this button 
  133. Cancel, so that users can easily identify it as the safe escape hatch.  
  134. For more information, see Human Interface Note #5, "What Cancel Means."
  135.  
  136.  
  137. The default button
  138.  
  139. In most cases, the default button should perform the most likely action 
  140. (if that can be determined).  This usually means completing the action 
  141. that the user initiated to display the alert box in the first place; 
  142. therefore, the default button is usually the same as the action button.  
  143. The default button is boldly outlined, and its action is performed when 
  144. the user presses the Return or Enter key.
  145.  
  146. If the most likely action is dangerous (for example, it erases the hard 
  147. disk), the default should be a safe button, typically the cancel button.  
  148. If none of the choices are dangerous and there is not a likely choice, 
  149. then there should be no default button.
  150.  
  151. When there is no default button, the user must explicitly click on one 
  152. of the buttons (pressing Return or Enter does not perform an action).  
  153. By requiring users to explicitly click on a button, you can protect them 
  154. from accidentally damaging their work by pressing the Return or Enter 
  155. key out of habit.
  156.  
  157.  
  158. Buttons (placement, size, capitalization, and feedback)
  159.  
  160. Put the action button in the lower right corner, with the cancel button 
  161. to its left.  Use this placement regardless of which button is the 
  162. default button; put the action button in the lower right corner even if 
  163. the cancel button is the default.
  164.  
  165. Buttons in alert boxes look best when they are 20 pixels high (not 
  166. counting the default button outline) and have at least 8 white pixels on 
  167. either side of each button's name.  These specifications mean that the 
  168. width of the button should be at least 18 pixels larger than the width 
  169. of the longest button name (16 pixels for the white space plus 2 pixels 
  170. for the edges).  It looks best to make all buttons the same width, 
  171. unless the buttons' names have extremely different length names.  If you 
  172. find yourself tempted to make buttons with extremely long names, 
  173. reconsider the names carefully; button names should be simple, concise, 
  174. and unambiguous.
  175.  
  176. Capitalize the first letter of each button name, but never capitalize 
  177. the entire name--with the single exception of the OK button.  The OK 
  178. button should always be named OK and never ok, Ok, Okay, okay, OKAY, or 
  179. any even stranger variation.  If a button name contains more than one 
  180. word, capitalize each word, such as Replace All or Cancel Printing.
  181.  
  182. As in all dialog boxes, any buttons that are activated by key sequences 
  183. must flash to give visual feedback as to which item has been chosen.  A 
  184. good rule of thumb is to invert the button for eight ticks; this is long 
  185. enough so that it is always visible, but short enough that it is not 
  186. annoying.  Alert box calls in the Toolbox use the eight tick value by 
  187. default.
  188.  
  189.  
  190. _____________________________________________________________________________
  191. Further Reference
  192.  
  193.   o  Human Interface Note #5, What Cancel Means
  194.   o  Macintosh Technical Note #263, International Canceling
  195.